<template>
  <div class="goods-list">
    <div class="goods-item" v-for="item in goodsList" :key="item.id">
        <router-link :to="'/home/goodsDetails/'+item.id">
          <img :src="item.img_url" :alt="item.title">
          <h1 class="title">{{ item.title }}</h1>
          <div class="content">
            <p class="price">
              <span class="nowPrice">￥{{ item.sell_price }}</span>
              <span class="oldPrice">￥{{ item.market_price }}</span>
            </p>
            <p class="msg">
              <span>热卖中</span>
              <span>剩{{ item.stock_quantity }}件</span>
            </p>
          </div>
        </router-link>
    </div>
    <mt-button type="danger" size="large" class="more" @click="getMore" v-show="flag">加载更多</mt-button>
    <p v-show="prompt" class="bottom">到底了！</p>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      pageIndex: 1, //定义页数初始值
      goodsList: [],
      flag: true, //定义加载更多按钮的显示和隐藏
      prompt: false, //定义“到底了”提示文字的显示和隐藏
      length: 0 //获取一页最多能放多少数据
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    getGoodsList() {
      this.$http
        .get("api/getgoods?pageindex=" + this.pageIndex)
        .then(result => {
          if (result.body.status === 0) {
            this.goodsList = this.goodsList.concat(result.body.message);
            if (this.pageIndex === 1) {
              this.length = result.body.message.length;
            }
            if (this.length > result.body.message.length) {
              this.flag = false;
              this.prompt = true;
            }
          } else {
            Toast("加载信息失败...");
          }
        });
    },
    getMore() {
      //点击按钮，pageIndex递增，增加数据，将数据追加到goodsList
      this.pageIndex++;
      this.getGoodsList();
    }
  }
};
</script>
<style lang="scss" scoped>
.goods-list {
  display: flex;
  flex-wrap: wrap;
  .goods-item {
    width: 47%;
    margin: 5px;
    border: 1px solid #ccc;
    box-shadow: 0 0 3px 3px #eee;
    padding: 3px;
    a {
      display: block;
      img {
        width: 180px;
        height: 180px;
      }
      h1.title {
        font-size: 14px;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis; //隐藏部分以省略号代替
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1; //显示几行
      }
      .content {
        background-color: #eee;
        padding: 3px;
        .price {
          font-size: 16px;
          color: red;
          font-weight: 700;
          margin-top: 5px;
          .oldPrice {
            color: #8f8f94;
            font-size: 14px;
            margin-left: 8px;
            text-decoration: line-through;
          }
        }
        .msg {
          display: flex;
          justify-content: space-between;
          margin-top: 6px;
        }
      }
    }
  }
  .more {
    margin: 5px 5px;
  }
  .bottom {
    height: 20px;
    width: 100%;
    text-align: center;
  }
}
</style>
